<template>
  <div class="cs-page-container">
    <el-button v-if="debug" style="margin: 10px" @click="editPage"
      >编辑</el-button
    >
    <el-dialog
      title="编辑页面"
      width="80%"
      :visible.sync="editDialogFormVisible"
    >
      <el-form :model="configData">
        <el-form-item label="表格字段">
          <el-button
            type="primary"
            size="mini"
            @click="dialogFormVisible1 = true"
            >添加字段</el-button
          >
          <el-form-item label="表格数据">
            <el-cascader
              v-model="configData['tableDataList']"
              :props="tableDataProps"
            ></el-cascader>
            当前选择: {{ configData['tableDataList'] }}
          </el-form-item>
          <el-table
            :data="configData['tableColumns']"
            border
            fit
            size="small"
            highlight-current-row
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column align="center" label="字段名">
              <template slot-scope="{ row }">
                <span>{{ row.label }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="字段值">
              <template slot-scope="{ row }">
                <span>{{ row['columnName'] }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="功能">
              <template slot-scope="{ row }">
                <span>{{ row['function'] }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="过滤器">
              <template slot-scope="{ row }">
                <span>{{ row['filter'] }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="editField(scope.$index)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="DeleteCol(scope.$index, configData['tableColumns'])"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePage">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加字段" :visible.sync="dialogFormVisible1">
      <el-form :model="fieldItem">
        <el-form-item label="字段名" :label-width="'100px'">
          <el-input v-model="fieldItem.label" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字段值" :label-width="'100px'">
          <el-select
            v-model="fieldItem['columnName']"
            filterable
            placeholder="字段值"
          >
            <el-option
              v-for="(i, idx) in getColumns()"
              :key="idx"
              :label="i.key"
              :value="i.key"
            >
              <span style="float: left">{{ i.key }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                i.value
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="功能" :label-width="'100px'">
          <el-select
            v-model="fieldItem['function']"
            filterable
            clearable
            placeholder="功能"
          >
            <template v-for="(value, key, idx) in columnsComponent">
              <el-option :key="idx" :label="key" :value="key"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="过滤器" :label-width="'100px'">
          <el-select
            v-model="fieldItem['filter']"
            filterable
            clearable
            placeholder="过滤器"
          >
            <template v-for="(value, key, idx) in columnsFilters">
              <el-option :key="idx" :label="key" :value="key"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addField">确 定</el-button>
      </div>
    </el-dialog>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="getDepthData(pageData, configData['tableDataList'])"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <template v-for="(item, index) in configData['tableColumns']">
          <el-table-column :key="index" align="center" :label="item.label">
            <template slot-scope="{ row }">
              <component
                :is="columnsComponent[item.function]"
                v-if="item.function"
                :value="row[item['columnName']]"
              ></component>
              <span v-else-if="item.filter">{{
                columnsFilter(item.filter, row[item['columnName']])
              }}</span>
              <span v-else>{{ row[item['columnName']] }}</span>
            </template>
          </el-table-column>
        </template>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          label="操作"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-button v-for="(item, idx) in configData.manipulates" :key="idx" size="mini" :type="item.type" @click="editButton(scope.$index, scope.row)">{{ item.name }}</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <!--      <TablePagination-->
      <!--        v-if="configData.hasOwnProperty('paginationItem') && configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])"-->
      <!--        :current-page="configData.requests[configData['selectRequest']]._params[configData.paginationItem.paginationPage]"-->
      <!--        :limit="configData.requests[configData['selectRequest']]._params[paginationItem.paginationOffset]"-->
      <!--        :total="getDepthData(pageData, configData.paginationItem.paginationTotal)"-->
      <!--        :loading="listLoading"-->
      <!--        @handleSizeChange="handleSizeChange"-->
      <!--        @handleCurrentChange="handleCurrentChangeOffset"-->
      <!--      />-->
    </div>
  </div>
</template>

<script>
import Base from '../../Base'
import { deepClone, parseTime } from '@/utils'
import { filterVipType, gender, toThousandFilter } from '@/filters'

export default {
  name: 'Table',
  extends: Base,
  props: {
    componentName: {
      type: String,
      default: ''
    },
    fromId: {
      type: Number,
      default: 0
    },
    debug: {
      // 是否处于调试状态
      type: Boolean,
      default: false
    },
    pid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogFormVisible1: false,
      tableDataProps: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      pageData: null,
      tableList: [],
      fieldItem: { label: '', columnName: '', function: null, filter: null },
      columnsComponent: {
        用户id: 'accountId'
      },
      columnsFilters: {
        性别过滤: gender,
        时间过滤: parseTime,
        vip: filterVipType,
        // '数字格式化 列: 10000 => 10k': numberFormatter,
        '数字格式化 列: 10000 => "10,000"': toThousandFilter
      }
    }
  },
  methods: {
    onCreated: function() {
      this.pageData = this.$route.meta.pageData[this.rootId]
      this.tableList = this.getDepthData(
        this.pageData,
        this.configData['tableDataList']
      )
    },
    lazyLoad: function(node, resolve) {
      console.log(node)
      const nodes = []
      let tmp = deepClone(this.pageData)
      if (node.data) {
        console.log(tmp)
        for (const i in node.data.path) {
          tmp = tmp[node.data.path[i]]
        }
        for (const j in tmp) {
          const nodeValue = deepClone(node.data.path)
          nodeValue.push(j)
          nodes.push({
            label: j,
            leaf: tmp[j].constructor !== Object,
            value: j,
            path: nodeValue
          })
        }
      } else {
        for (const i in this.pageData) {
          nodes.push({
            label: i,
            leaf: this.pageData[i].constructor !== Object,
            value: i,
            path: [i]
          })
        }
      }
      console.log(nodes)
      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(nodes)
    },
    getDepthData(data, value) {
      if (!value || value.length === 0) {
        return null
      }
      let tmp = deepClone(data)
      for (const i in value) {
        if (!tmp[value[i]]) {
          return null
        }
        tmp = tmp[value[i]]
      }
      return tmp
    },
    getColumns: function() {
      const ls = this.getDepthData(
        this.pageData,
        this.configData['tableDataList']
      )
      const col = []
      if (ls === null) {
        return col
      }
      for (const name in ls[0]) {
        col.push({ key: name, value: ls[0][name] })
      }
      return col
    },
    editField: function(index) {
      console.log('编辑字段')
      this.fieldItem = this.configData.tableColumns[index]
      this.fieldItem.fieldID = index
      this.dialogFormVisible1 = true
    },
    addField: function() {
      console.log('添加字段')
      if (!this.configData.tableColumns) {
        this.configData.tableColumns = []
      }
      const tmp = deepClone(this.fieldItem)
      if (tmp.fieldID != null) {
        this.configData.tableColumns[tmp.fieldID] = tmp
      } else {
        this.configData.tableColumns.push(tmp)
      }
      this.fieldItem.fieldId = null
      this.dialogFormVisible1 = false
    },
    columnsFilter: function(filterName, value) {
      return this.columnsFilters[filterName](value)
    },
    doSearch: function() {
      console.log('doSearch')
    },
    DeleteCol: function(index, data) {
      data.splice(index, 1)
    }
  }
}
</script>

<style scoped></style>
